<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公司管理</title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="company">
        <el-table :data="companies" border stripe style="width: 100%" >
            <el-table-column label="logo" width="180" >
                <template #default="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.logoPath" fit="contain" />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="公司名称" width="180"></el-table-column>
            <el-table-column prop="username" label="用户名" width="180"></el-table-column>
            <el-table-column label="公司性质">
                <template #default="scope">
                    {{scope.row.attribute === 'STATE_ENTERPRISE' ? "国企" : scope.row.attribute === 'PRIVATE_ENTERPRISE' ? "民营" : "上市公司"}}
                </template>
            </el-table-column>
            <el-table-column prop="scale" label="公司规模"></el-table-column>
            <el-table-column prop="industry" label="所属行业"></el-table-column>
            <el-table-column prop="contacts" label="联系人"></el-table-column>
            <el-table-column prop="tel" label="联系电话"></el-table-column>

        </el-table>
        <el-pagination style="margin-top: 12px;" v-model:page-size="pageSize" v-model:current-page="pageIndex"
                       :hide-on-single-page="pages == 1"
                       background layout="prev, pager, next" :total="total" @change="jump"/>
    </div>

    <script>
        const {createApp} = Vue
        const app = createApp({
            data(){
                return {
                    pageIndex: 1,
                    pageSize: 1,
                    companies: [],
                    total: 0,
                    pages: 1
                }
            },
            created(){
                console.log('created')
                this.loadCompanies()
            },
            methods: {
                async loadCompanies(){
                    const {data: resp} = await axios.get(`http://localhost/admin/companies/list`, {
                        params: {
                            pageIndex: this.pageIndex,
                            pageSize: this.pageSize
                        },
                        withCredentials: true
                    }).catch(error =>{
                        if(error.status == 401){
                            //跳转到登录页面
                            window.top.location = "login.html"
                        }
                    })
                    console.log(resp)
                    if(resp.status === 'SUCCESS'){
                        this.companies = resp.data.list
                        this.total = resp.data.total
                        this.pageIndex = resp.data.pageNum
                        this.pageSize = resp.data.pageSize
                        this.pages = resp.data.pages
                    }
                },
                jump(){
                    console.log(`跳转分页，${this.pageIndex}, ${this.pageSize}`)
                    this.loadCompanies()
                }
            }
        })
        app.use(ElementPlus);
        app.mount("#company")
    </script>
</body>
</html>